<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>首页--集影工作室</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/basic.css">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
	<header>
		<nav id="nav">
			<div id="logo"><img src="img/logo.png"></div>
			<ul>
				<li class="active"><a href="index.html">首页</a></li>
				<li><a href="informations.html">热门推荐</a></li>
				<li><a href="ticket.html">业务套餐</a></li>
				<li><a href="scenery.html">作品欣赏</a></li>
				<li><a href="about.html">工作室简介</a></li>
			</ul>
		</nav>
	</header>
<!--	<div id="app">-->
<!--		{{info }}-->
<!--	</div>-->
	<div class="search"></div>

	<div class="tour" id="app">

		<section class="news" >
			<h2>作品展示</h2>
			<p>人像、风景、城市、夜景、旅游、运动、宠物、生活、美食、家居、美业等各种最新热门摄影推荐</p>
		</section>
		<figure  v-for="item in info.data.page.list">
<!--            {{item}}-->
			<img :src="item.url">
<!--			<img src="img/pic1.jpg">-->
			<figcaption>
				<strong class="title">{{item.title}}
				<div class="info">
				    <em class="sat">满意度 {{item.score}}</em>
					<span class="price">{{item.place}}</span>
				</div>
				<div class="type">{{item.type}}</div>
			</figcaption>
		</figure>

<!--		<figure>-->
<!--			<img src="img/pic2.jpg">-->
<!--			<figcaption>-->
<!--				<strong class="title">夜色温柔，黑色掩盖了一切罪恶，浮华之世，莫不是覆上了一层面具!-->
<!--				<div class="info">-->
<!--				    <em class="sat">满意度 99%</em>-->
<!--					<span class="price">夕阳·夜色</span>-->
<!--				</div>-->
<!--				<div class="type">风景展示</div>-->
<!--			</figcaption>-->
<!--		</figure>-->

<!--		<figure>-->
<!--			<img src="img/pic3.jpg">-->
<!--			<figcaption>-->
<!--				<strong class="title">护城河顾名思义，就是护城的河。而河与城配伍，就成了历代王朝一种坚强的防御体系-->
<!--				<div class="info">-->
<!--				    <em class="sat">满意度 99%</em>-->
<!--					<span class="price">北京·护城河</span>-->
<!--				</div>-->
<!--				<div class="type">风景展示</div>-->
<!--			</figcaption>-->
<!--		</figure>-->

<!--		<figure>-->
<!--			<img src="img/pic4.jpg">-->
<!--			<figcaption>-->
<!--				<strong class="title">气势雄伟壮观，凝聚着中国古代劳动人民智慧与力量的结晶，作为元、明、清代都城的报时中心-->
<!--				<div class="info">-->
<!--				    <em class="sat">满意度 99%</em>-->
<!--					<span class="price">北京·钟楼</span>-->
<!--				</div>-->
<!--				<div class="type">风景展示</div>-->
<!--			</figcaption>-->
<!--		</figure>-->

<!--		<figure>-->
<!--			<img src="img/pic5.jpg">-->
<!--			<figcaption>-->
<!--				<strong class="title">圆明园十二生肖人身兽首铜像原为圆明园海晏堂外的喷泉的一部分，是清乾隆年间的红铜铸像。-->
<!--				<div class="info">-->
<!--				    <em class="sat">满意度 99%</em>-->
<!--					<span class="price">圆明园·十二生肖</span>-->
<!--				</div>-->
<!--				<div class="type">风景展示</div>-->
<!--			</figcaption>-->
<!--		</figure>-->

<!--		<figure>-->
<!--			<img src="img/pic6.jpg">-->
<!--			<figcaption>-->
<!--				<strong class="title">高度的技术水平和不朽的艺术价值，充分显示出了古代劳动人民的智慧和力量-->
<!--				<div class="info">-->
<!--				    <em class="sat">满意度 99%</em>-->
<!--					<span class="price">北京·鼓楼</span>-->
<!--				</div>-->
<!--				<div class="type">风景展示</div>-->
<!--			</figcaption>-->
<!--		</figure>-->

<!--		<figure>-->
<!--			<img src="img/pic7.jpg">-->
<!--			<figcaption>-->
<!--				<strong class="title">注视着她的每一个拱门、拱壁和每一处圆顶支撑，无不感动着建筑的恢弘，追寻着一种渴望的注目-->
<!--				<div class="info">-->
<!--				    <em class="sat">满意度 99%</em>-->
<!--					<span class="price">北京·教堂</span>-->
<!--				</div>-->
<!--				<div class="type">风景展示</div>-->
<!--			</figcaption>-->
<!--		</figure>-->

<!--		<figure>-->
<!--			<img src="img/pic8.jpg">-->
<!--			<figcaption>-->
<!--				<strong class="title">娇嫩雅致的花朵透着沁人心脾的清香,仿佛是一位笑颊粲然的舞蹈着的少女-->
<!--				<div class="info">-->
<!--				    <em class="sat">满意度 99%</em>-->
<!--					<span class="price">北京·圆明园</span>-->
<!--				</div>-->
<!--				<div class="type">风景展示</div>-->
<!--			</figcaption>-->
<!--		</figure>-->

<!--		<figure>-->
<!--			<img src="img/pic9.jpg">-->
<!--			<figcaption>-->
<!--				<strong class="title">举目远眺，一望无际的湖水明亮如镜，微风吹拂蔚湖面荡起微微的涟漪，风儿携着细浪跃到湖面上-->
<!--				<div class="info">-->
<!--				    <em class="sat">满意度 99%</em>-->
<!--					<span class="price">北京·圆明园</span>-->
<!--				</div>-->
<!--				<div class="type">风景展示</div>-->
<!--			</figcaption>-->
<!--		</figure>-->
	</div>

	<footer id="footer">
		<div class="top">
			<div class="block left">
				<h3>合作伙伴</h3>
				<hr>
				<ul>
					<li>麦亚科技</li>
					<li>帧创艺术微喷</li>
					<li>绘人生设计工作室</li>
				</ul>
			</div>
			<div class="block middle">
				<h3>摄影FAQ</h3>
				<hr>
				<ul>
					<li>摄影三大主要元素？</li>
					<li>风景拍摄和人物拍摄的角度区别？</li>
					<li>摄影初学者如何挑选相机？</li>
				</ul>
			</div>
			<div class="block right">
				<h3>联系方式</h3>
				<hr>
				<ul>
					<li>集影工作室</li>
					<li>电话：17634920728</li>
					<li>邮箱：1107507154@qq.com</li>
				</ul>
			</div>
		</div>
	</footer>
</body>
</html>
<script type="text/javascript">

    window.onload = function(){


        new Vue({
            el: '#app',
            data () {
                return {
                    info: null
                }
            },
            mounted () {
                axios
                    .get('http://localhost:8080/ph/generator/pworks/list')
                    .then(response => (this.info = response))
            }
        })



        // var vm = new Vue({
        //     el:'#app',
        //     data:{
        //         msg:'Hello World!',
        //     },
        //     methods:{
        //         // sss:function(){
        //         //     //发送get请求
        //         //     this.$http.post('http://localhost:8080/ph/generator/pworks/list').then(response => {
        //         //         console.log(response.data);
        //         //     },function(){
        //         //         console.log('请求失败处理');
        //         //     });
        //         // }
        //
        //
        //     }
        //
        //
        //
        // });


    }

</script>
